<template>
      <div>
        <Title :title="title"></Title>
        <div style="height: 200px;" ref="boxy2"></div>
      </div>
    </template>
    
    <script setup>
    import Title from './Title.vue'
    import { ref, onMounted } from 'vue'
    const title = ref(' 实时颗粒物监测 ')
    import { DualAxes } from '@antv/g2plot';
    
    const boxy2 = ref(null);
    
    const data = [
     { year: '1991', pm10: 3, pm25: 10 },
     { year: '1992', pm10: 4, pm25: 4 },
     { year: '1993', pm10: 3.5, pm25: 5 },
     { year: '1994', pm10: 5, pm25: 5 },
     { year: '1995', pm10: 4.9, pm25: 4.9 },
     { year: '1996', pm10: 6, pm25: 35 },
     { year: '1997', pm10: 7, pm25: 7 },
     { year: '1998', pm10: 9, pm25: 1 },
     { year: '1999', pm10: 13, pm25: 20 },
    ];
    
    const loadb3 = () => {
      const dualAxes = new DualAxes(boxy2.value, {
     data: [data, data],
     xField: 'year',
     yField: ['pm10', 'pm25'],
     geometryOptions: [
      {
       geometry: 'line',
       color: '#5B8FF9',
      },
      {
       geometry: 'line',
       color: '#5AD8A6',
      },
     ],
    });
    
    dualAxes.render();
    
    }
    
    onMounted(async() => {
    
      loadb3();
    })
    
    </script>
    
    <style scoped lang="less"></style>